<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";

//获取数据
import {
  getOrderList,
  getOrderDetail,
  updateOrderDetail,
} from "@/api/dingdan/dingdanList";

//分页功能

const currentPage4 = ref(1)
const total=ref('')
const pageSize4 = ref(5)




let data = ref([]);
onMounted(() => {
  get();
});

function get() {
  getOrderList(currentPage4.value,pageSize4.value).then((res) => {
    data.value = Object.values(res.data.data);
    total.value=res.data.total
  });
}

const handleSizeChange = (val: number) => {
  get()
}
const handleCurrentChange = (val: number) => {
  get()
}
let flag = ref(false);


let useFrom = ref({
  address_id: "",
  delivery: "",
  express: "",
  id: "",
  manber_id: "",
  order_sn: "",
  order_time: "",
  order_type: "",
  payment: "",
  payment_flowing: "",
  price: "",
  remarks: "",
  request_result: "",
  returntype: "",
  send_time: "",
  status: "",
  info: {},
});

//订单详情

const dialogVisible = ref(false);


const handleEdit = (index: number, row: any) => {

  
  dialogVisible.value = true;
  getOrderDetail(row.id).then((res) => {
    useFrom.value = res;
  });
};

let huixian = (row: any) => {

  flag.value = true;
  useFrom.value = row;
 
};

//修改功能
let xiugai = () => {
  let obj = {
    id: useFrom.value.id,
    delivery: useFrom.value.delivery,
    express: useFrom.value.express,
  }
  updateOrderDetail(obj).then((res: any) => {
   
    get();
    flag.value = false;
  });
};
</script>

<template>
  <el-table :data="data" style="width: 100%">
    <el-table-column label="ID" prop="id" />
    <el-table-column label="订单编号" prop="delivery" />
    <el-table-column label="购买时间" prop="order_time" />
    <el-table-column label="购买人" prop="manber_id" />
    <el-table-column label="订单总价格" prop="price" />
    <el-table-column label="订单状态" prop="status">
      <template #default="scope">
        <el-tag
          :type="
            scope.row.returntype == 1
              ? 'danger'
              : scope.row.returntype == 2
              ? 'warning'
              : scope.row.status == 1
              ? ''
              : scope.row.status == 2
              ? 'primary'
              : scope.row.status == 3
              ? 'primary'
              : scope.row.status == 4
              ? 'success'
              : scope.row.status == 5
              ? 'info'
              : 'success'
          "
        >
          {{
            scope.row.returntype == 1
              ? "退货"
              : scope.row.returntype == 2
              ? "换货"
              : scope.row.status == 1
              ? "代付款"
              : scope.row.status == 2
              ? "待发货"
              : scope.row.status == 3
              ? "待收货"
              : scope.row.status == 4
              ? "已评价"
              : scope.row.status == 5
              ? "已取消"
              : "已完成"
          }}
        </el-tag>
      </template>
    </el-table-column>

    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >详情</el-button
        >
        <el-button size="small" type="danger" @click="huixian(scope.row)"
          >修改</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 回显弹框 -->
  <el-dialog v-model="dialogVisible" title="订单详情" width="800">
    <span>
      <div class="asd">
        <!-- 用户 -->

        <p>用户名：{{ useFrom.manber_id }}</p>

        <!-- 快递编号： -->

        <p>快递编号：{{ useFrom.order_sn }}</p>
        <p>
          状态：{{
            useFrom.returntype == 1
              ? "退货"
              : useFrom.returntype == 2
              ? "换货"
              : useFrom.status == 1
              ? "代付款"
              : useFrom.status == 2
              ? "待发货"
              : useFrom.status == 3
              ? "待收货"
              : useFrom.status == 4
              ? "已评价"
              : useFrom.status == 5
              ? "已取消"
              : "已完成"
          }}
        </p>
      </div>

      <el-card
        style="max-width: 600px"
        v-for="time in useFrom.info"
        :key="time.id"
      >
        <div class="box">
          <div>
            <img :src="time.goods_img"  style="width: 100px; height: 100px;" />
          </div>
          <div>
            <p>商品名称：{{ time.goods_name }}</p>
            <p>商品价格：{{ time.price }}</p>
            <p>商品数量：{{ time.number }}</p>
            <p>单价：{{ time.price }} 单个总价：{{ time.goods_total }}</p>
          </div>
        </div>
      </el-card>

      <!-- 购买时间 -->
      <div class="gou">
        <p>总价：{{ useFrom.price }}</p>
        <p>下单时间：{{ useFrom.order_time }}</p>
        <p>备注：{{ useFrom.remarks }}</p>
      </div>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改弹框 -->
  <el-dialog v-model="flag" title="修改状态" width="500">
    <span>
      <div>公司：<el-input type="text" v-model="useFrom.express" /></div>

      <div>快递单号：<el-input type="text" v-model="useFrom.delivery" /></div>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="flag = false">取消</el-button>
        <el-button type="primary" @click="xiugai"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- //分页功能 -->
  <div class="demo-pagination-block">
    
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>


</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box p {
  margin-top: 20px;
}
.gou {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
}
.asd {
  display: flex;
  justify-content: space-around;
  font-size: 17px;
}
</style>
